<template>
  <div class="ele-body">
    <el-card shadow="never" body-style="padding-bottom:0;">
      <el-row :gutter="15">
        <el-col :md="4" style="margin-bottom:15px;">
          <el-card class="box-card">
                  <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText" size="small">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>

        <el-tree
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          node-key="uuid"
          accordion
          :filter-node-method="filterNode"
          @node-click='nodeClick'
          ref="tree">
        </el-tree>
        </el-card>
        </el-col>
        <el-col :md="20" style="margin-bottom:15px;">
        <el-card class="box-card">
          <building ref='childList' :level="level" :p_id="p_id"></building>
        </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import building from './building'
export default {
  name: "SysConfigGroup",
  components: {building},
  data() {
    return {
        filterText: '',
        treeData: [{
          id: 0,
          label: '全部宿舍楼',
          uuid:0,
          children:[
          ]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
      level:1,
      p_id:0,
    }
  },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
  computed: {
    /* 表格固定高度 */
    tbHeight() {
      return this.$store.state.theme.screenWidth < 992 ? undefined : 'calc(100vh - 265px)';
    }
  },
  mounted(){
    this.loadData(0,0)
    this.$nextTick(() => {
        this.$refs.childList.getColsAndQuery()
    })
  },
  methods: {
    nodeClick(data,node){
      this.level = node.level
      this.p_id = data.id
      this.loadData(data.uuid,data.id)
      this.$nextTick(() => {
          this.$refs.childList.getColsAndQuery()
      })
    },
    loadData(nodeKey,id){
          const loading = this.$loading({lock: true});
          this.$http.get('/Common/getChildrenNode', {params: {level:this.level,id}}).then(res => {
            loading.close();
            // this.$message({type: 'success', message: res.msg});
            // if(res.data.length == 0) return this.$message.error('没有数据');
            this.$nextTick(() => {
                this.$refs['tree'].updateKeyChildren(nodeKey,res.data);
            })
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
    },
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    },
    /* 显示编辑 */
    edit() {
    },
    /* 保存编辑 */
    save() {
    },
    /* 删除 */
    remove() {
    }
  }
}
</script>

<style scoped>
.el-table thead {
    color: #8c8c8c !important
}
.dict-table >>> .el-table__row {
  cursor: pointer;
}

.dict-table >>> .el-table__row > td:last-child:after {
  content: "\e6e0";
  font-family: element-icons !important;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px;
}

.dict-table >>> .el-table__row > td:last-child .cell {
  padding-right: 20px;
}
</style>